/* 移动端优化样式 */

/* 全局移动端优化 */
@media (max-width: 768px) {
  /* 防止移动端强制缩放 */
  * {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* 允许文本选择的元素 */
  .chapter-text,
  .novel-description,
  input,
  textarea {
    -webkit-user-select: text;
    user-select: text;
  }

  /* 改善触摸体验 */
  button,
  .btn,
  .clickable {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  /* 移动端按钮最小尺寸 */
  button,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* 改善滚动性能 */
  .scrollable,
  .chapter-list-content,
  .reader-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 防止内容溢出 */
  body,
  #app {
    overflow-x: hidden;
    width: 100%;
  }

  /* 改善表单体验 */
  input,
  textarea,
  select {
    font-size: 16px; /* 防止iOS缩放 */
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #ddd;
    
    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
  }

  /* 改善卡片布局 */
  .novel-card,
  .chapter-item,
  .category-card {
    margin-bottom: 12px;
    border-radius: 12px;
    overflow: hidden;
    
    &:active {
      transform: scale(0.98);
      transition: transform 0.1s;
    }
  }

  /* 优化导航栏 */
  .el-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* 优化底部导航 */
  .el-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* 移动端模态框优化 */
  .el-dialog {
    width: 90vw !important;
    margin: 5vh auto !important;
    border-radius: 16px !important;
    
    .el-dialog__header {
      padding: 20px 20px 10px;
    }
    
    .el-dialog__body {
      padding: 10px 20px 20px;
      max-height: 70vh;
      overflow-y: auto;
    }
  }

  /* 移动端表格优化 */
  .el-table {
    font-size: 14px;
    
    .el-table__header th {
      padding: 8px 4px;
    }
    
    .el-table__body td {
      padding: 8px 4px;
    }
  }

  /* 移动端分页优化 */
  .el-pagination {
    justify-content: center;
    margin: 20px 0;
    
    .el-pager li {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      margin: 0 2px;
    }
    
    .btn-prev,
    .btn-next {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
    }
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  /* 字体大小调整 */
  html {
    font-size: 14px;
  }
  
  /* 间距调整 */
  .container,
  .page-container {
    padding: 12px;
  }
  
  /* 网格布局优化 */
  .novel-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* 按钮优化 */
  .btn-group {
    flex-direction: column;
    gap: 8px;
    
    .btn {
      width: 100%;
    }
  }
  
  /* 表单优化 */
  .form-row {
    flex-direction: column;
    
    .form-item {
      width: 100%;
      margin-bottom: 16px;
    }
  }
}

/* 横屏优化 */
@media (max-height: 500px) and (orientation: landscape) {
  .mobile-navbar {
    height: 40px;
    
    .navbar-content {
      height: 40px;
      padding: 0 12px;
    }
  }
  
  .reader-header {
    height: 40px !important;
    
    .novel-info {
      .novel-title {
        font-size: 14px !important;
      }
      
      .chapter-title {
        font-size: 12px !important;
      }
    }
  }
  
  .reader-footer {
    padding: 8px 12px !important;
    
    .control-buttons .control-btn {
      padding: 4px 6px !important;
      min-height: 36px !important;
    }
  }
}

/* 安全区域适配 */
@supports (padding: max(0px)) {
  .safe-area-top {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  
  .safe-area-left {
    padding-left: max(12px, env(safe-area-inset-left));
  }
  
  .safe-area-right {
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* 深色模式移动端优化 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .el-header {
    background: rgba(42, 42, 42, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  
  .mobile-navbar {
    background: rgba(42, 42, 42, 0.95);
  }
  
  .reader-header,
  .reader-footer {
    background: rgba(42, 42, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* 触摸反馈动画 */
@keyframes touch-feedback {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.touch-feedback:active {
  animation: touch-feedback 0.15s ease-out;
}

/* 移动端专用工具类 */
.mobile-hidden {
  @media (max-width: 768px) {
    display: none !important;
  }
}

.mobile-only {
  @media (min-width: 769px) {
    display: none !important;
  }
}

.mobile-full-width {
  @media (max-width: 768px) {
    width: 100% !important;
  }
}

.mobile-center {
  @media (max-width: 768px) {
    text-align: center !important;
  }
}

.mobile-stack {
  @media (max-width: 768px) {
    flex-direction: column !important;
    
    > * {
      width: 100% !important;
      margin-bottom: 12px;
    }
  }
} 